@import './theme.scss';
$baseVw: 3.75;

@function vw($num) {
  @if unitless($num) {
    @return $num / $baseVw + vw
  }
  @return $num / $baseVw
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,button,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}a{text-decoration:none;color:#409eff}:hover{-webkit-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}::-webkit-input-placeholder{color:#999}:-moz-placeholder{color:#999}::-moz-placeholder{color:#999}:-ms-input-placeholder{color:#999}input,button,textarea{outline:0;display:inline-block;border:0;-webkit-appearance:none}
input::-webkit-search-cancel-button{display:none}body,html{line-height:1em;height:100%;font-family:"Microsoft YaHei","宋体","Arial";-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;font-size:.13rem}.arial{font-family:"Arial"}ol,ul{list-style:none}blockquote,q{quotes:none}textarea{border:0}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}img{border:0;width:100%}.h1,h1{font-size:vw(18vw)}.h2,h2{font-size:vw(14vw)}.h3,h3{font-size:vw(13vw)}.h4,h4{font-size:vw(12vw)}.h5,h5{font-size:vw(11vw)}.h6,h6{font-size:vw(10vw)}.text-3{color:#333}.text-6{color:#666}.text-9{color:#999}.text-y{color:#feb900}.text-f{color:#fff}.text-red{color:#c20e15}.text-blue{color:#409eff}.text-l{text-align:left}.text-c{text-align:center}.text-r{text-align:right}.bg-y{background:#feb900}
.fl{float:left}.fr{float:right}.clear{clear:both}.clearfix{clear:both}.clearfix:before{content:".";display:block;clear:both;height:0;font-size:0;visibility:hidden;overflow:hidden}.clearfix:after{content:".";display:block;clear:both;height:0;font-size:0;visibility:hidden;overflow:hidden}
.x_flex {
  display: flex;
}
.x_flex-between {
  display: flex;
  justify-content: space-between;
}
.x_flex-around {
  display: flex;
  justify-content: space-around;
}
.toast {
  position: fixed;
  bottom: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 999999;
  transition: all .3s;
  span {
    display: inline-block;
    padding: vw(15vw) vw(15vw);
    border-radius: vw(5vw);
    background: rgba(0,0,0,.8);
    color: #fff;
  }
}
// inputText
.label-text {
  width: 100%;
  display: flex;
  align-items: center;
  line-height: vw(37vw);
  margin-bottom: vw(10vw);
  justify-content: flex-start;
  background: #fff;
  .label {
    width: 25%;
    height: vw(37vw);
    padding-left: 10px;
    line-height: vw(37vw);
  }
  .input-text {

    height: vw(37vw);
    width: 100%;
    box-sizing: border-box;
    // border: 1px solid #eee;
    padding: 0 vw(10vw);
    border-radius: vw(5vw);
    font-size: vw(14vw);
  }
  &.label-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .label {
      height: vw(37vw);
      line-height: vw(37vw);
    }
  }
}

// XCheckbox
.x-checkbox{
  position: relative;
  line-height: 1.5em;
  padding: vw(17vw) vw(5vw);

  .x-icon {
    color: $color-9;
  }

  .native {
    color: $color-primary !important;
    vertical-align: middle;
  }
  .text{
    vertical-align: middle;
    display: inline-block;
    line-height: 1.5em;
    padding-left: vw(5vw);

  }
  .input-checkbox{
    position: absolute;
    left: -2000;
  }
}

// XRadio
.x-radio{
  position: relative;
  line-height: 1.5em;
  padding: vw(170vw) vw(5vw);

  .native{
    color: $color-primary !important;
    vertical-align: middle;
  }
  .text{
    vertical-align: middle;
    display: inline-block;
    line-height: 1.5em;
    padding-left: vw(5vw);

  }
  .input-radio{
    position: absolute;
    left: -2000;
  }

}

// XSelect
.x-select {
  display: flex;
  align-items: center;
  line-height: vw(37vw);
  margin-bottom: vw(10vw);
  justify-content: flex-start;
  width: 100%;
  background: #fff;

  .label {
    width: 25%;
    height: vw(37vw);
    line-height: vw(37vw);
    padding-left: 10px;
  }
  .select{
    position: relative;
    width: 75%;
    select{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      background: transparent;
      opacity: 0;
    }
  }
  .icon-select {
    position: absolute;
    top: vw(8vw);
    right: vw(10vw);
  }
  .input-text {
    width: 100%;
    height: vw(37vw);
    box-sizing: border-box;
    // border: 1px solid #eee;
    padding: 0 vw(17vw);
    border-radius: vw(5vw);
    box-sizing: border-box;
    font-size: vw(14vw);
    background: transparent;
  }
}
.select-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .label {
    height: vw(37vw);
    line-height: vw(37vw);
  }
}

// modal-confirm
.modal-confirm {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90000;
  width: 100%;
  height: 100%;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
  }
  .modal-body {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
    text-align: center;
    background: #ffffff;
    border-radius: vw(5vw);
  }
  .modal-header {
    height: vw(40vw);
    line-height: vw(40vw);
    border-bottom: 0.5px solid #fafafa;
  }
  .modal-main {
    line-height: vw(40vw);
    padding: vw(5vw) 0;
  }
  .modal-footer {
    line-height: vw(45vw);
    border-top: 0.5px solid #eee;
    span {
      width: 50%;
      line-height: inherit;
      font-size: 0vw(14vw);
      color: #09f;
      border-right: 0.5px solid #eee;
    }
  }
}

// Prompt
.modal-prompt {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90000;
  width: 100%;
  height: 100%;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
  }
  .modal-body {
    position: absolute;
    top: 30%;
    left: 10%;
    width: 80%;
    text-align: center;
    background: #ffffff;
    border-radius: vw(5vw);
  }
  .modal-header {
    height: vw(40vw);
    line-height: vw(40vw);
    border-bottom: 0.5px solid #fafafa;
  }
  .modal-main {
    line-height: vw(40vw);
    padding: vw(5vw) 0;
  }
  .modal-footer {
    line-height: vw(45vw);
    border-top: 0.5px solid #eee;
    span {
      width: 50%;
      line-height: inherit;
      font-size: 0vw(14vw);
      color: #09f;
      border-right: 0.5px solid #eee;
    }
  }
}

// swiper
.swiper {
  position: relative;
  width: 100%;
  height: vw(170vw);
  background: #eee;
  overflow: hidden;
  li {
    position: absolute;
    top: 0;
    left: 0;
    width: vw(375vw);
    height: vw(170vw);
    overflow: hidden;
    p {
      position: absolute;
      bottom: vw(40vw);
      left: 10%;
      width: 80%;
      text-align: center;
      color: #fff;
      overflow: hidden;
    }
  }
  img {
    width: 100%;
  }
  .swiper-page {
    position: absolute;
    bottom: vw(8vw);
    width: 100%;
    box-sizing: border-box;
    left: 0;
    padding: 0 vw(5vw);
    height: vw(10vw);
    display: flex;
    justify-content: center;
    span {
      height: vw(10vw);
      width: vw(10vw);
      margin: 0 vw(5vw);
      border-radius: 50%;
      background: #fff;
      border: vw(2vw) solid #fff;
      box-sizing: border-box;
    }
    .active {
      background: #fff;
      border: vw(2vw) solid #09f;
    }
    .dice-left {
      justify-content: flex-start;
    }

    .dice-right {
      justify-content: flex-end;
    }

    
  }
  .swiper-btn {
    position: absolute;
    top: 50%;
    width: vw(32vw);
    height: vw(32vw);
    color: #fff;
    opacity: 0.5;
    margin-top: vw(-16vw);
  }
  .swiper-btn-left {
    left: vw(10vw);
  }

  .swiper-btn-right {
    right: vw(10vw);
  }
  /* 可以设置不同的进入和离开动画 左进左出 */
  /* 设置持续时间和动画函数 */
  .slide-left-enter-active {
    transition: all 0.5s ease;
  }

  .slide-left-leave-active {
    transition: all 0.5s;
  }

  .slide-left-enter, .slide-right-leave-to {
    transform: translate(100%, 0);
  }

  .slide-right-enter-active {
    transition: all 0.5s ease;
  }

  .slide-right-leave-active {
    transition: all 0.5s ease;
  }

  .slide-right-enter, .slide-left-leave-to {
    transform: translate(-100%, 0);
  }
}
// badge
.badge {
  position: absolute;
  top: vw(-10vw);
  right: vw(-10vw);
  width: vw(20vw);
  height: vw(20vw);
  line-height: vw(20vw);
  text-align: center;
  background: $color-alert;
  font-size: vw(12vw);
  color: #ffffff;
  border-radius: vw(10vw);
}
// footer
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 640px;
  z-index: 999999;
  width: 100%;
  height: vw(49);
  border-top: 1px solid #eee;
  margin: 0 auto;
  background: #fff;
  text-align: center;

  p {
    padding-top: vw(2vw);
  }
  .active{
      color: #f55
  }
}
// header
.header{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 640px;
  height: vw(44vw);
  line-height: vw(44vw);
  z-index: 999999;
  border-bottom: 1px solid #eee;
  margin: 0 auto;
  background: #fff;
  text-align: center;
  h1{
    width: 100%;
    height: inherit;
  }
  span{
      position: absolute;
      top: 0;
      width: vw(44vw);
      height: inherit;
  }
  .header-l{
    left: 0;
  }
  .header-r{
    right: 0;
    transition: all .3s;
  }

}
.header-r {

  color: #09f
}
.flex{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

// loading
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900000;
  background: rgba(255, 255, 255, 0.5);
  .icon-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: vw(-25vw);
    color: #999;
    animation: changDeg 2s linear 0.2s infinite;
    opacity: .2;
  }
  .icon-close{
    position: absolute;
    top: vw(50vw);
    right: vw(10vw);
    color: #f5f5f5
  }
}

// media
.media {
  position: relative;
  height: vw(70vw);
  padding: vw(10vw);
  border-bottom: 1px solid #eee;
  min-height: 20;
  .media-left {

    position: relative;
    top: 0;
    left: 0;
    width: 20%;
    height: 0;
    float: left;
    padding: 10% 0;
    overflow: hidden;
    border-radius: vw(5vw);
    img {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: auto;
      transform: translate(0, -50%);

    }
  }
  .media-body {
    padding-left: 22%;
    line-height: 1.5;
    font-size: vw(12vw);
    h3 {
      padding-bottom: vw(5vw);
      line-height: 2;
      font-weight: 600;
      font-size: vw(15vw);

    }
    .media-title {
      width: 74%;
      overflow: hidden;;
      text-overflow:ellipsis; ;
      white-space: nowrap; ;

    }
      
    p {
      overflow: hidden;
      color: #666;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

    }

  }

}
// sidebar
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 900000;
  .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.2);
  }

  .side-body {
    position: absolute;
    top: vw(45vw);
    bottom: 0vw(50vw);
    right: 0;
    width: 80%;
    background: #fff;
    .side-body-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: vw(30vw);
      padding: vw(170vw) 0;
      border-top: .5px solid #eee;
    }
      
  }
  .bg-e{
    padding: vw(170vw);
    background: #eee;

    .x_btn {
      margin: 0 vw(170vw) vw(170vw) 0;
    }
  }
}

// thumbnail
.thumbnail {
  box-sizing: border-box;
  padding: vw(10vw);
  background: #ffffff;
  border-radius: vw(5vw);
  .pic {
    position: relative;
    width: 100%;
    height: 0;
    padding: 50% 0;
    overflow: hidden;
    img {
      transform: translate(0, -50%);
    }
    p {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 95%;
      padding: 0 2.5%;
      line-height: vw(32vw);
      color: #fff;
      background: rgba(0,0,0,.5);
    }
  }
  .info {
    padding-top: vw(5vw);
    line-height: 1.2;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;;
    display: -webkit-box;;
    -webkit-line-clamp: 2;;
    -webkit-box-orient: vertical;;
  }
}

$btn-default: vw(32vw);

@mixin btn($num) {
  height: $btn-default + $num;
  line-height: $btn-default + $num;
  border-radius: ($btn-default + $num) * 0.1;
}

@mixin btnTheme($color) {
  background: $color;
  border-color: $color;
  color: #fff;
}

@mixin btnPlainTheme($color) {
  background: #fff;
  border-color: $color;
  color: $color;
}
%x_btn {
  position: relative;
  display: inline-block;
  padding: 0 vw(15vw);
  @include btn(0);
  background: #fff;
  color: #333;
  border: 1px solid #ddd;
}
// x_btn
[class^="x_btn"] {
  @extend %x_btn;
}
.x_btn {
  &-primary {
    @include btnTheme($color-primary)
  }
  &-success {
    @include btnTheme($color-success)
  }
  &-alert {
    @include btnTheme($color-alert)
  }
  &-danger {
    @include btnTheme($color-danger)
  }

  &-primary-plain {
    @include btnTheme($color-primary);
    @include btnPlainTheme($color-primary)
  }
  &-success-plain {
    @include btnTheme($color-success);
    @include btnPlainTheme($color-success)
  }
  &-alert-plain {
    @include btnTheme($color-alert);
    @include btnPlainTheme($color-alert)
  }
  &-danger-plain {
    @include btnTheme($color-danger);
    @include btnPlainTheme($color-danger)
  }
  
  &-small {
    @include btn(vw(-8vw));
  }
  
  &-big {
    @include btn(vw(8vw));
  }
  
  &-lg {
    width: 100%;
  }
}

// x-cell
.x-cell {
  position: relative;
  display: flex;
  justify-content: space-between ;
  height: vw(44vw);
  line-height: vw(24vw);
  box-sizing: border-box;
  padding: vw(10vw);
  border-bottom: 1px solid #eee;
  background: #fff;
  font-size: vw(16vw);
  .cell-left {
    position: relative;
    .date{
      font-weight: 500;
    }
  }
}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-13, .col-md-14, .col-md-15, .col-md-16, .col-md-17, .col-md-18, .col-md-19, .col-md-20, .col-md-21, .col-md-22, .col-md-23, .col-md-24 {
  float: left;
  -webkit-box-flex: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
};
@for $i from 1 to 24 {
  .col-md-#{$i}{
    width: 100% / 24 * $i;
  }
}


// x-icon
.x-icon {
  position: relative;
  display: inline-block;
  width: vw(20vw);
  height: vw(20vw);
  line-height: 1em;
  font-size: vw(20vw);
  vertical-align: middle;
}

.x-icon-small {
  @extend .x-icon;
  width: vw(20vw - 4);
  height: vw(20vw - 4);
}

.x-icon-big {
  @extend .x-icon;
  width: vw(20vw + 4);
  height: vw(20vw + 4);
}

// scroll
.scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  .down-update {
    width: 100%;
    text-align: center;
    transition: all 0.2s;
  }

  .scroll-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.5);
    padding-top: 80%;
    text-align: center;
  }
}